<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useStore from '../store'
const { main, footer } = useStore()
const { clearCompleted } = main
const { changeActive } = footer
const { unCompleted, computed, list } = storeToRefs(main)
const { tabs, active } = storeToRefs(footer)
</script>
<template>
  <footer class="footer" v-if="list.length > 0">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{ unCompleted.length }}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li v-for="item in tabs" :key="item" @click="changeActive(item)">
        <a :class="{selected : item === active}" href="#/">{{item}}</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button v-if="computed.length > 0" class="clear-completed" @click="clearCompleted">清空已完成的</button>
  </footer>
</template>